<template>
  <div class="payResultPage">
    <div class="headerBox">
      <van-nav-bar v-if="dataDetail.orderType==1" :title="dataDetail.orderStatus==2?'已完成':dataDetail.orderStatus==0?'待支付':dataDetail.orderStatus==4?'已取消':''" left-arrow @click-left="goBack" />
      <van-nav-bar v-else :title="dataDetail.orderStatus==0?'待支付': dataDetail.orderStatus==2?'已通过':dataDetail.orderStatus==7?'待审核':dataDetail.orderStatus==8?'未通过':''" left-arrow @click-left="goBack" />
    </div>
    <div class="result">
      <!-- <p class="txt1">{{dataDetail.orderTime1}}</p> -->
      <img src="@/assets/img/goods/icon_chenggong@2x.png" alt="" v-if="dataDetail.orderStatus==2">
      <img src="@/assets/img/goods/guoqi@2x.png" alt="" v-if="dataDetail.orderStatus==4">
      <img src="@/assets/img/goods/icon_daishenhe@2x.png" alt="" v-if="dataDetail.orderStatus==7">
      <img src="@/assets/img/goods/quxiao@2x.png" alt="" v-if="dataDetail.orderStatus==8">
    </div>
    <div class="result2" v-if="dataDetail.orderStatus==0">
      <img src="@/assets/img/goods/icon_daifukuan@2x.png" alt="" >
      <div>
        <p>待付款</p>
        <p>将在
          <van-count-down :time="time" format="HH 时 mm 分 ss 秒" class="countTime" @finish="finishFunc" />
          后取消，请及时完成。</p>
      </div>
    </div>
    <div class="orderBox orderBox1">
      <div class="subOrder">
        <p class="txt2">订单编号：<span>{{dataDetail.orderNumber}}</span></p>
        <p class="txt3" id="copyTxt" @click="copyUrl" :data-clipboard-text="dataDetail.orderNumber">复制</p>
      </div>
    </div>
    <div class="subGoods">
      <div class="subGoodsL">
        <img :src="imgPath+dataDetail.goodsCoverImg" alt  @click="goGoods" />
      </div>
      <div class="subGoodsR">
        <div class="subGoodsRT">
          <div class="flex">
            <p class="txt6">{{dataDetail.goodsName}}</p>
          </div>
          <p class="txt8">￥{{dataDetail.unitPrice}}/份</p>
        </div>
        <div v-if="dataDetail.orderStatus==1">
          <p class="txt9">总价：￥{{dataDetail.orderTotalPrice}}</p>
          <p class="txt10">定金：￥{{dataDetail.orderDiscountTotalPrice}}</p>
        </div>
        <div v-else>
          <p class="txt9">认购份额：{{dataDetail.orderQuantity}}</p>
          <p class="txt10">总金额：￥{{dataDetail.orderTotalPrice}}</p>
        </div>
      </div>
    </div>
    <div class="ts_box" v-if="dataDetail.orderStatus==0 && dataDetail.orderType!=1">
      <div class="samll_box">户名：成都星际港湾科技有限公司</div>
      <div class="samll_box">银行：农业银行成都金融城支行</div>
      <div class="samll_box">对公账户：2280 8301 0400 12144 <span class="txt11" id="copyTxt" @click="copyUrl" data-clipboard-text="22808301040012144">复制</span></div>
    </div>
    <div class="tip tip1" v-if="dataDetail.orderRemark">
      <p class="tipTitle">订单备注</p>
      <div class="tipContent">{{dataDetail.orderRemark}}</div>
    </div>
    <div class="tx_box" v-if="dataDetail.orderStatus==0 && dataDetail.orderType!=1">
      <p class="txt12">支付提示</p>
      <div class="txt13">请将认购总额支付至星际港湾的对公账户，付款完成后，点击【报单】进入报单页面，提交付款凭证、支付方式以及备注信息。</div>
      <div class="txt14">
        <span class="dot"></span>
        <span>请将支付完成的票据拍照上传</span>
      </div>
    </div>
    <!-- <div class="tip" v-if="dataDetail.orderStatus==2">
      <p class="tipTitle">温馨提示</p>
      <div class="tipContent">
        尊敬的客户:您认购的这份订单在下单后的45天后开始计算收益
      </div>
    </div> -->
    
    <div class="tip tip1" v-if="dataDetail.orderStatus!=0 && dataDetail.orderType!=1">
      <p class="tipTitle">报单凭证</p>
      <img :src="dataDetail.policyCertificateImg" alt="" style="width:100%">
    </div>
    <div class="handlerBox" v-if="dataDetail.orderStatus==0 && dataDetail.orderType!=1">
      <p class="handlerBtn handlerBtn1" @click="orderList">我的订单</p>
      <p class="handlerBtn handlerBtn2" @click="orderAliPayFunc">报单</p>
    </div>
    <!-- <div class="handlerBox" v-if="dataDetail.orderStatus==0">
      <p class="handlerBtn handlerBtn1" @click="cancelFunc">取消订单</p>
      <p class="handlerBtn handlerBtn2" @click="orderAliPayFunc">继续支付</p>
    </div>
    <div class="handlerBox" v-if="!origin&&dataDetail.orderStatus!=0">
      <p class="handlerBtn handlerBtn1" @click="go('myOrder')">查看订单</p>
      <p class="handlerBtn handlerBtn3" @click="go('index')">返回首页</p>
    </div>

    <div class="handlerBox handlerBox2" v-if="origin&&dataDetail.orderStatus==2&&this.dataDetail.isOnShelf">
      <p class="handlerBtn handlerBtn1" @click="applyReturnFunc">申请退款</p>
    </div>

    <van-overlay :show="popupShow" @click="popupShow = false">
      <div class="confirmBox" @click.stop>
        <p class="txt2">退款理由</p>
        <div>
          <van-field
            class="textarea"
            v-model="refundDirections"
            rows="4"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请填写退款理由…"
          />
        </div>
        <div class="flex">
          <p class="handlerBtn handlerBtn4" @click="popupShow=false">取 消</p>
          <p class="handlerBtn handlerBtn5" @click="returnFunc">确 认</p>
        </div>
      </div>
    </van-overlay> -->
  </div>
</template>


<script>
import dayjs from 'dayjs'
import config from "@/config/env";
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      dueTime:60*24*60*1000,
      time:'',
      origin:'',
      orderId:'',
      dataDetail:{},
      imgPath: "",
      goodsId:'',
      popupShow:false,
      refundDirections:''
    };
  },
  activated() {
    this.imgPath = config.ossUrl;
    this.origin=this.$route.query.origin
    this.orderId=this.$route.query.orderId
    this.goodsId = this.$route.query.goodsId
    this.getOrderDetail()
  },
  methods: {
    orderList () {
      this.$router.push({name:'myOrder'})
    },
    // 复制
    copyUrl () {
      let self = this
      var clipboard = new Clipboard('#copyTxt')
      clipboard.on('success', e => {
        self.$toast('复制成功')
      })
    },
    goGoods(){
      if(this.isOnShelfFunc()){
        this.goGoodsDetail()
      }
    },
    applyReturnFunc(){
      if(this.isOnShelfFunc()){
        this.popupShow=true
      }
    },
    isOnShelfFunc(){
      if (this.dataDetail.isOnShelf==0){
        this.$toast('该商品已下架')
      } else {
        return true
      }
    },
    dayjsFunc(time) {
        time = new Date(time.replace(/-/g, '/')).getTime()
        let times = String(time).length == 10 ? time * 1000 : time;
        let format = 'YYYY年MM月DD日 HH:mm:ss'
        return dayjs(Number(times)).format(format);
    },
    goBack(){
      if(this.origin) {
        this.$router.go(-1)
      } else {
        this.goGoodsDetail()
      }
    },
    goGoodsDetail(){
      this.$router.push({name:'goodsDetail',query:{id:this.goodsId}})
    },
    go(name){
      this.$router.push({name:name})
    },
    go1(name){
     this.$router.push({ name: name ,query:{orderId:this.orderId,goodsId:this.goodsId}});
    },
    finishFunc(){},
    async getOrderDetail(){
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      let res = await this.$http.orderDetail({orderId:this.orderId});
      if (res) {
        this.dataDetail=res.data
        console.log(this.dataDetail)
        let date = new Date().getTime()-new Date(this.dataDetail.orderTime.replace(/-/g, '/')).getTime()
        this.time = this.dueTime-date
        this.goodsId = res.data.goodsId
        this.dataDetail.orderTime1=this.dayjsFunc(this.dataDetail.orderTime)
        this.$toast.clear();
      } else {
        this.$toast.clear();
      }
    },
    // 复制
    copyUrl () {
      let self = this
      var clipboard = new Clipboard('#copyTxt')
      clipboard.on('success', e => {
        self.$toast('复制成功')
      })
    },
    // 退款
    async returnFunc(){
      if(!this.refundDirections){
        this.$toast('请填写退款理由')
        return
      }
      let res = await this.$http.refundOrder({orderId:this.orderId,refundDirections:this.refundDirections});
      if (res) {
        this.$toast('提交成功')
        this.$router.push({name:'myCustoms'})
      }
    },
    cancelFunc(){
      this.$dialog.confirm({
        title: '提示',
        message: '确定要取消订单吗？',
        theme: 'round-button',
        confirmButtonColor:'#00C8E7',
        cancelButtonColor:'#C8CEDA',
      })
      .then(async () => {
        let res = await this.$http.cancelOrder({orderId:this.orderId});
        if (res) {
          this.getOrderDetail()
        }
      })
      .catch(() => {
        // on cancel
      });
    },
    async orderAliPayFunc(){
      let info = {
        orderId:this.orderId,
        orderQuantity:this.dataDetail.orderQuantity,
        orderTotalPrice:this.dataDetail.orderTotalPrice
      }
      this.$router.push({name:'otherPay',query:{info:encodeURIComponent(JSON.stringify(info))}})
        // if(this.isOnShelfFunc()){
        //   if(this.time<=0){
        //     this.$toast('订单超时，请重新下单')
        //     return 
        //   }
        //   let res = await this.$http.orderAliPay({orderId:this.orderId});
        //   if (res) {
        //     let orderInfo =res.data
        //     this.payFunc(orderInfo)
        //   }
        // }
    },
    
    payFunc(orderInfo){
      let self = this
      var aliPayPlus = api.require('aliPayPlus');
      aliPayPlus.payOrder({
          orderInfo: orderInfo
      }, function(ret, err) {
        if(ret.code==9000){
          //9000：支付成功
          setTimeout(()=>{
            self.getOrderDetail()
          })
        } else if(ret.code==8000){
          self.$toast("正在处理中");
          setTimeout(()=>{
            self.getOrderDetail()
          })
        } else if(ret.code==4000){
          setTimeout(()=>{
            self.getOrderDetail()
          })
        } else if(ret.code==5000){
          self.$toast("重复请求");
        } else if(ret.code==6001){
          //6001：用户中途取消支付操作
          setTimeout(()=>{
            self.getOrderDetail()
          })
        } else if(ret.code==6002){
          self.$toast("网络连接出错");
        } else if(ret.code==6004){
          self.$toast("正在处理中");
        }
      });
    },
  }
};
</script>
<style>
.countTime{
  color: #fff;
  display: inline-block;
}
.textarea{
  background:#F5F5F5 ;
  margin: 0.2rem 0 0.4rem;
}
</style>
<style scoped>
.ts_box{
  box-sizing: border-box;
  height: 1.88rem;
  padding: .28rem .29rem;
  border-bottom: 1px solid #FAFAFA;
}
.samll_box{
  width: 100%;
  height: .36rem;
  position: relative;
  margin-bottom: .12rem;
  font-size: .26rem;
  color: #333;
}
.tx_box{
  box-sizing: border-box;
  padding: .28rem .29rem;
}
.txt12{
  font-size: .29rem;
  font-weight: 600;
  color: #333333;
  line-height: .4rem;
  margin-bottom: .2rem;
}
.txt13{
  font-size: .29rem;
  font-weight: 400;
  color: #666666;
  line-height: .4rem;
  margin-bottom: .24rem;
}
.txt14{
  font-size: .29rem;
  font-weight: 600;
  color: #F6741F;
  line-height: .4rem;
}
.dot{
  display: inline-block;
  width: .1rem;
  height: .1rem;
  background: #F6741F;
  margin-right: .08rem;
  border-radius: 50%;
  position: relative;
  top: -0.03rem;
}
.txt11{
  font-size: 0.24rem;
  color: #00C8E7;
  position: absolute;
  right: 0;
}
.payResultPage{
  min-height: 100vh;
  background: #fff;
}
.result{
  padding-top: 0.2rem;
  text-align: center;
}
.result img{
  width: 0.96rem;
  height: 0.96rem;
  margin-top: 0.2rem;
}
.orderBox{
  padding: 0.28rem;
  border-top: 1px solid #FAFAFA;
  border-bottom: 1px solid #FAFAFA;
  margin-top: 0.24rem;
}
.orderBox2{
  border-top:none;
  margin-top: 0;
}
.orderBox p{
  margin-bottom: 0.16rem;
}
.orderBox p:last-child,.orderBox1 .subOrder p{
  margin-bottom: 0
}
.subOrder{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.txt1{
  font-size: 0.24rem;
}

.txt2{
  font-size: 0.26rem;
}

.txt3{
  font-size: 0.24rem;
  color: #00C8E7;
}
.subGoods {
  display: flex;
  padding: 0.2rem 0.28rem;
  border-bottom: 1px solid #FAFAFA;
}
.subGoodsR{
  width: 100%;
}
.subGoodsL img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.08rem;
  margin-right: 0.16rem;
}
.money {
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.subGoodsRT{
  padding-bottom: 0.16rem;
  border-bottom: 1px dashed #ECECEC;
  margin-bottom: 0.18rem;
}
.txt7 {
  font-size: 0.26rem;
  color: #b5b5b5;
  margin-bottom: 0.2rem;
}
.txt4 {
  font-size: 0.24rem;
}
.txt5 {
  font-size: 0.44rem;
}
.txt6 {
  font-size: 0.32rem;
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
  font-weight: 600;
}
.txt8 {
  font-size: 0.3rem;
}
.txt9 {
  font-size: 0.3rem;
  color: #666;
}
.txt10{
  font-size: 0.32rem;
  color: #F30F0F;
  margin-top: 0.1rem;
  font-weight: 600;
}
.tip{
  padding: 0.28rem;
  padding-bottom: 0.42rem;
}
.tip1{
  border-bottom: 1px solid #FAFAFA;
}
.tipTitle{
  font-size: 0.28rem;
  margin-bottom: 0.28rem;
  font-weight: 600;
}
.tipContent{
  font-size: 0.28rem;
  color: #666666;
  line-height: 0.4rem;
}
.result2{
  display: flex;
  padding: 0.2rem 0.4rem;
  background: #F30F0F;
  color: #fff;
  font-size: 0.28rem;
}
.result2 p{
  line-height: 0.4rem;
}
.result2 img{
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.12rem;
}
.handlerBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 2px solid #FAFAFA;
  padding: 0.2rem 0.4rem;
}
.handlerBox2{
  justify-content: center;
}
.handlerBtn{
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size:0.34rem;
}
.handlerBtn1{
  width: 2.2rem;
  background: #fff;
  border: 0.02rem solid #BABABA;
  color: #666666;
  font-size: 0.28rem;
}
.handlerBtn2{
 width: 4.1rem;
 background: #F6741F;
}
.handlerBtn3{
  width: 4.1rem;
  color: #F6741F;
  border: 0.02rem solid #F6741F;
}
.confirmBox{
  position: relative;
  width: 6.54rem;
  height: 5.18rem;
  border-radius: 0.12rem;
  background: #fff;
  padding: 0 0.42rem;
  left: 50%;
  top: 50%;
  margin-left: -3.27rem;
  margin-top: -2.77rem;
}
.confirmBox .txt2{
  text-align: center;
  padding-top: 0.4rem;
  font-size: 0.36rem;
  font-weight: 600;
  margin-bottom: 0.16rem;
}
.handlerBtn4{
  width: 2.7rem;
  background: #C8CEDA;
}
.handlerBtn5{
  width: 2.7rem;
  background: #00C8E7;
}
</style>
